import { 
  Box, 
  Flex, 
  useColorModeValue,
  VStack,
  Button
} from '@chakra-ui/react';
import { useState } from 'react';
import { AssistantHeader } from './AssistantHeader';
import MessageList from './MessageList';
import ChatInput from './ChatInput';
import { Message } from './MessageBubble';
import { nanoid } from 'nanoid';
import { DropTarget } from '../drag-drop/DropTarget';
import { ContentPreview } from '../drag-drop/ContentPreview';
import { useDragDrop } from '@/hooks/useDragDrop';
import { createAIPrompt } from '@/services/dragContentFormatter';

interface AIAssistantPanelProps {
  onClose?: () => void;
}

export const AIAssistantPanel = ({ onClose }: AIAssistantPanelProps) => {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: 'welcome',
      content: '你好！我是你的AI写作助手。我可以帮你改进故事情节、扩展场景描写、生成对话或者解答写作方面的问题。你可以将项目内容拖拽到这里，我会基于这些内容提供更相关的帮助。',
      sender: 'ai',
      timestamp: new Date()
    }
  ]);
  const [loading, setLoading] = useState(false);
  
  const {
    droppedItems,
    handleDrop,
    removeDroppedItem,
    clearDroppedItems
  } = useDragDrop();
  
  const handleSendMessage = (content: string) => {
    // 添加用户消息
    const userMessage: Message = {
      id: nanoid(),
      content,
      sender: 'user',
      timestamp: new Date()
    };
    
    setMessages(prev => [...prev, userMessage]);
    setLoading(true);
    
    // 如果有拖入的内容，将其添加到提示中
    let prompt = content;
    if (droppedItems.length > 0) {
      prompt = `${content}\n\n${createAIPrompt(droppedItems)}`;
      clearDroppedItems();
    }
    
    // 模拟AI回复
    setTimeout(() => {
      // 根据用户消息生成一个更有帮助的模拟回复
      let aiContent = '';
      const userContentLower = prompt.toLowerCase();
      
      if (userContentLower.includes('描写') || userContentLower.includes('场景')) {
        aiContent = '以下是一个更加丰富的场景描写示例：\n\n'
          + '黄昏的光芒斜射进古老的图书馆，灰尘在光束中缓缓舞动，如同时间的碎片。书架高耸至天花板，木质的纹理讲述着数百年的故事。空气中弥漫着羊皮纸、墨水和历史的气息，窗外枝桠摇曳的影子在地板上投下斑驳的花纹，仿佛是另一个世界的生物在墙壁上游走。角落里的老座钟滴答作响，每一声都像是对永恒的轻声低语。';
      } else if (userContentLower.includes('对话') || userContentLower.includes('人物')) {
        aiContent = '这是一段更有特色的角色对话示例：\n\n'
          + '"你总是这样，不是吗？"莉亚将茶杯重重放在桌上，液体溅出边缘。\n\n'
          + '马克斯叹了口气，手指无意识地敲击着桌面。"具体指什么？我的谨慎还是我的犹豫？"\n\n'
          + '"两者都是，"她直视着他的眼睛，"但主要是你那种明知问题所在却假装一切正常的态度。"\n\n'
          + '他停下了敲击，室内突然安静得令人不安。"有时候，"他最终开口，声音低沉，"面对某些真相需要的不是勇气，而是时机。"';
      } else if (userContentLower.includes('情节') || userContentLower.includes('故事')) {
        aiContent = '以下是一个可能的故事情节转折：\n\n'
          + '当艾伦终于找到传说中的水晶洞穴时，他惊讶地发现洞口已经有人先行一步。地上的脚印还很新鲜，通向洞穴深处。更令他不安的是，这些脚印的形状与他熟悉的任何生物都不相同。随着他深入洞穴，墙壁上的古老符文开始发光，仿佛回应着什么人的召唤。突然，一阵微弱的笑声从黑暗中传来，他认出了这个声音——它属于他五年前在那场大火中supposedly已经死去的妹妹。';
      } else {
        aiContent = '感谢您的提问。作为AI写作助手，我可以帮助您：\n\n'
          + '• 丰富场景描写和环境细节\n'
          + '• 发展人物性格和背景故事\n'
          + '• 构建合理且引人入胜的情节\n'
          + '• 改进对话，使其更自然且富有个性\n'
          + '• 提供不同文体和风格的写作建议\n\n'
          + '请详细描述您需要帮助的具体方面，我会针对性地提供建议。';
      }
      
      const aiResponse: Message = {
        id: nanoid(),
        content: aiContent,
        sender: 'ai',
        timestamp: new Date()
      };
      
      setMessages(prev => [...prev, aiResponse]);
      setLoading(false);
    }, 1500);
  };
  
  return (
    <Flex 
      direction="column" 
      h="100%" 
      bg={useColorModeValue('white', 'gray.800')}
    >
      <AssistantHeader onClose={onClose} />
      
      <Box flex="1" overflow="hidden">
        <MessageList messages={messages} loading={loading} />
        
        {droppedItems.length > 0 && (
          <Box p={4}>
            <VStack spacing={2} align="stretch">
              {droppedItems.map((item, index) => (
                <ContentPreview
                  key={index}
                  content={item}
                  onRemove={() => removeDroppedItem(index)}
                />
              ))}
              <Button
                size="sm"
                variant="ghost"
                onClick={clearDroppedItems}
              >
                清除所有内容
              </Button>
            </VStack>
          </Box>
        )}
        
        <DropTarget
          id="ai-assistant-drop-target"
          onDrop={handleDrop}
        >
          <Box p={4} textAlign="center" color="gray.500">
            将项目内容拖拽到这里
          </Box>
        </DropTarget>
      </Box>
      
      <ChatInput 
        onSendMessage={handleSendMessage} 
        disabled={loading}
        placeholder="输入您的问题或指令..." 
      />
    </Flex>
  );
};
